<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="never">
    <title th:text="${source.title}"></title>
    <link rel="stylesheet" href="/css/willesPlay.css">
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/willesPlay.js"></script>
</head>
<body style="background-color: #F1F1F1">

<!-- 导航栏 -->
<div th:insert="~{header :: nav}"></div>

<!-- 播放器 -->
<div class="container" style="margin-top: 50px;" id="content">
    <div class="row">
        <div class="col-md-8">
            <div id="willesPlay">
                <div class="playHeader">
                    <div class="videoName" >
                        <p style="display: inline-block" id="videoName" th:text="${source.title}"></p>
                        <button id="collectBtn" class="btn btn-danger" style="margin-left: 20px" data-toggle="modal" data-target="#collectModal" th:if="${#httpServletRequest.remoteUser}"><span class="glyphicon glyphicon-heart"></span> 收藏</button>
                    </div>
                </div>
                <div class="playContent">
                    <video width="100%" height="auto" id="playVideo" autoplay>
                        <source src="" />
                        当前浏览器不支持HTML5视频播放器
                    </video>
                    <div class="playTip glyphicon glyphicon-play" style="display: none"></div>
                </div>
                <div class="playControll">
                    <div class="playPause"></div>
                    <div class="timebar">
                        <span class="currentTime">0:00:00</span>
                        <div class="progress">
                            <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>
                        </div>
                        <span class="duration">0:00:00</span>
                    </div>
                    <div class="otherControl">
                        <span class="volume glyphicon glyphicon-volume-down"></span>
                        <span class="fullScreen glyphicon glyphicon-fullscreen"></span>
                        <div class="volumeBar">
                            <div class="volumewrap">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width: 8px;height: 40%;"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-danger" style="margin-top: 20px">
                <div class="panel-heading">
                    <h3 class="panel-title">来源 / 解析</h3>
                </div>
                <div class="panel-body">
                    <a class="btn btn-danger" th:href="${source.value}" target="_blank"><span class="glyphicon glyphicon-film"></span> [[${source.provider}]]</a>
                    <a class="btn btn-success" th:href="${source.parser}" target="_blank"><span class="glyphicon glyphicon-fire"></span> [[${source.parserName}]]</a>
                    <p style="margin: 10px">无法播放请使用Edge或Safari或手机浏览器</p>
                </div>
            </div>
            <div class="panel panel-danger videoList" style="margin-top: 20px">
                <div class="panel-heading">
                    <h3 class="panel-title">选集</h3>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End 播放器 -->

<!-- 私藏 模态框 -->
<div class="modal fade" id="collectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    私藏
                </h4>
            </div>
            <div class="modal-body" style="text-align: center" id="createBody">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">标题</label>
                        <div class="col-sm-10">
                            <p class="form-control" id="collectName" ></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">分类</label>
                        <div class="col-sm-10" id="selectDiv">
                            <select id="categorySelect" name="categorySelect" class="form-control">

                            </select>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-info" id="createCategoryItem">
                    确定
                </button>
            </div>
        </div>
    </div>
</div>
<!-- End 私藏 模态框 -->

<!-- 提示 模态框 -->
<div class="modal fade" id="promptModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title">
                    提示
                </h4>
            </div>
            <div class="modal-body" style="text-align: center">
                <p style="color:red; font-size: 20px" id="result"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
            </div>
        </div>
    </div>
</div>
<!-- End 提示 模态框 -->

<script th:inline="javascript">
    var playUrl = [[${source.playUrl}]];
    $("#playVideo").attr("src", playUrl);
</script>

<script style="text/javascript">

    /* 收藏 */
    $("#collectBtn").click(function () {
         $.get("/user/categories", function (data) {
             $("#collectName").text(videoTitle);
             $("#categorySelect").remove();
             if (data.length == 0){

             }else {
                 var select = $("<select id=\"categorySelect\" name=\"categorySelect\" class=\"form-control\"></select>");
                 $("#selectDiv").append(select);
                 for (var i = 0; i < data.length; i++){
                     var option = $("<option></option>")
                     option.val(data[i].id);
                     option.text(data[i].name);
                     $("#categorySelect").append(option);
                 }
             }
         })
    });

    /* 收藏到指定分类 */
    $("#createCategoryItem").click(function(){
        $.post("/user/category/item/add",{
            "type": "VIDEO",
            "name": videoTitle,
            "value": "/view?u="+videoValue,
            "id": $("#categorySelect").val()
        },function(data){
            $('#collectModal').modal('hide');
            $("#result").text(data.message);
            $('#promptModal').modal('show');
        });
    });

    /* 获取当前电视剧的分集信息 */
    $(document).ready(function (){
        var regx = /u=(.*)/;
        var src = regx.exec(window.location.href)[1];
        var api = "/api/episode";
        $.get(api, {"v":src}, function (data) {
            if (data.length > 0){
                var jumb = $("<div class='panel-body listItem'>");
                $(".videoList").append(jumb);
                for (var i=0;i<data.length;i++){
                    var episode = $("<button class='btn btn-danger episodeSelect' style='margin: 5px;'></button>")
                    episode.text(data[i].index);
                    episode.attr("value",data[i].value);
                    $(".listItem").append(episode);
                }
                $(".episodeSelect").click(function (){
                    var playUrl = $(this).val();
                    playUrl = "/api/video?v=" + playUrl;
                    $.get(playUrl,function (data)
                    {
                        videoTitle = data.title;
                        videoImage = data.image;
                        videoValue = data.value;
                        $("#videoName").text(data.title);
                        $("#playVideo").attr("src", data.playUrl);
                    })
                });
            }
        });
    });

</script>
</body>
</html>
